<!--头像-->
<script setup lang="js">
import {computed, defineProps, onMounted, ref} from 'vue';
import {storeSystemCertificateInfo} from "@/renderer/main-window/stores/storeSystemCertificateInfo.js";

const {
  size,
  profileId,
  percentage,
  summonerLevel,
  shape,
  levelTagSize
} = defineProps({
  profileId: {},
  "size": {
    type: Number,
    default: 36,
  },
  "shape": {
    default: "square",
  },
  "showProgress": {
    default: false,
  },
  "strokeWidth": {
    default: 6
  },
  "summonerLevel": {},
  "percentage": {
    type: Number,
    default: 0
  },
  //等级tag的大小
  "levelTagSize": {
    type: Number,
    default: 28
  }
})
const colors = [
  {color: '#f56c6c', percentage: 20},
  {color: '#e6a23c', percentage: 40},
  {color: '#5cb87a', percentage: 60},
  {color: '#1989fa', percentage: 80},
  {color: '#6f7ad3', percentage: 100},
]


const src = computed(() => {
  if (profileId) {
    return `${storeSystemCertificateInfo().getImgProxyPrefix()}/lol-game-data/assets/v1/profile-icons/${profileId}.jpg`;
  }
  return '';

})

</script>

<template>

  <el-progress
      v-if="showProgress"
      type="dashboard"
      :stroke-width="strokeWidth"
      :percentage="percentage" :color="colors" :width="size+20" class="lcu-profile-avatar-wrapper"
  >
    <el-avatar ref="avatar" :size="size" :shape="shape" :src="src"/>
    <el-tag
        v-if="summonerLevel!==undefined"
        :style="{
      position:'absolute',
      top:'90%',
      left:`calc(50% - ${levelTagSize/2}px)`,
      width:`${levelTagSize}px`
    }">
      {{ summonerLevel }}
    </el-tag>
  </el-progress>

  <el-avatar v-else ref="avatar" :size="size" :shape="shape" :src="src"/>
</template>

<style lang="scss">
//.lcu-profile-avatar-wrapper {
//  & > sup {
//    display: none;
//  }
//
//}
</style>